import './App.css';
import Counter from './components/Counter/index'
import { useState } from "react"

function App() {
  let _countValue = 10;
  const [countValue, setCountValue] = useState(10)

  // 一个问题：虽然js的创建引用值的效率非常高 但是也经不起一个超大项目的成千上万次的重复创建吧
  // React给我们提供了一个叫做useCallBack的api来协助我们缓存引用（涉及到hook依赖，之后讲）
  const handleClick = () => {
    console.log("hello react")
    setCountValue(prev => prev + 1);
  }
  return (
    <div>
      <Counter onClick={ handleClick } defaultValue={_countValue}/>
      {/* <button onClick={ handleClick }></button> */}
      {/* 标签属性：标签属性是会被React自行处理的*/}
      <div style={{width: "100px", height: "100px", backgroundColor: "red", color: "yellow"}}>
        {countValue}
      </div>
    </div>
  );
}

export default App;

// 1. 我们给Counter组件挂一个onClick的组件属性
// 2. 这个组件属性会被作为参数传递给Counter函数
// 3. 我们有在Counter组件里去使用props.onClick